<script setup>
import { nextTick, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";
import couponApi from "@/api/couponApi";
import constants from "@/utils/constants";

const router = useRouter();

const submitForm = ref();
const searchForm = ref();
const bindParam = reactive({
    memberPhone: ""
});
const searchModel = reactive({
    name: "",
});
const visible = ref(false);
const loading = ref(false);
const showBindVisible = ref(false);

let submitData = ref({
    type: '金额',
    generateNum: 1,
    limitTimes: 1,
});

let pagination = reactive({
    total: 0,
    current: 1,
    pageSize: 15,
    showPageSize: true,
    pageSizeOptions: [15, 25, 30, 50],
    showTotal: true,
    pageChange: (current) => {
        pagination.current = current;
        search(current, pagination.pageSize);
    },
    pageSizeChange(size) {
        pagination.pageSize = size;
        search(pagination.current, size);
    },
});

const columns = [
    {
        title: "优惠券码",
        dataIndex: "couponId",
        width: 140
    },
    {
        title: "绑定用户",
        dataIndex: "memberPhone",
        width: 130
    },
    {
        title: "优惠券名称",
        dataIndex: "name",
    },
    {
        title: "优惠券描述",
        dataIndex: "couponDesc",
    },
    {
        title: "券类型",
        dataIndex: "type",
        width: 80
    },
    {
        title: "券金额",
        dataIndex: "value",
        width: 80
    },
    {
        title: "使用状态",
        slotName: "used",
        width: 100
    },
    {
        title: "审核状态",
        slotName: "state",
        width: 100
    },
    {
        title: "操作",
        slotName: "action",
        align: 'center',
        fixed: "right",
        width: 200,
    },
];
const data = ref([]);

const showAddDialog = () => {
    visible.value = true;
    submitForm.value.resetFields();
    submitData.value = {
        type: '金额',
        generateNum: 1,
        limitTimes: 1,
    }
};

const editRecord = (record) => {
    visible.value = true;
    nextTick(() => {
        submitForm.value.resetFields();
        submitData.value = Object.assign({}, record);
        submitData.value.value = parseFloat(record.value);
    });
};

const bindRecord = (record) => {
    showBindVisible.value = true;
    bindParam.memberPhone = "";
    bindParam.cpId = record.cpId;
}

const bindCoupon = () => {
    couponApi.bind(bindParam).then(res => {
        Message.success("绑定成功");
        refresh();
    })
}

const deleteRecord = (record) => {
    couponApi
        .delete({
            cpId: record.cpId,
        })
        .then((res) => {
            search(1, 15);
        });
};

const handleSubmitSuccess = (values, e) => {
    couponApi.save(values).then((res) => {
        visible.value = false;
        Message.success("保存成功");
        search(1, 15);
    });
};

const search = (current = 1, size = 15) => {
    var params = {
        pageNo: current,
        pageSize: size,
        queryParam: Object.assign({}, searchModel),
    };
    loading.value = true;
    couponApi.queryPage(params).then((res) => {
        data.value = res.records;
        pagination.total = res.total;
        loading.value = false;
    });
};

const refresh = () => {
    search(1, 15);
};

const getNationName = (value) => {
    let nationItem = constants.nationList.find((res) => {
        return res.value == value;
    });
    return !nationItem ? "" : nationItem.label;
};

const reset = () => {
    searchForm.value.resetFields();
};

search();
</script>

<template>
    <a-card>
        <a-row>
            <a-col :flex="1">
                <a-form ref="searchForm" :model="searchModel" :label-col-props="{ span: 8 }"
                    :wrapper-col-props="{ span: 16 }" label-align="left">
                    <a-row :gutter="16">
                        <a-col :span="8">
                            <a-form-item field="couponId" label="优惠券码">
                                <a-input v-model="searchModel.couponId" placeholder="请输入优惠券码" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item field="name" label="优惠券名称">
                                <a-input v-model="searchModel.name" placeholder="请输入优惠券名称" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </a-col>
            <a-divider style="height: 84px" direction="vertical" />
            <a-col :flex="'86px'" style="text-align: right">
                <a-space direction="vertical" :size="18">
                    <a-button type="primary" @click="refresh">
                        <template #icon>
                            <icon-search />
                        </template>
                        查询
                    </a-button>
                    <a-button @click="reset">
                        <template #icon>
                            <icon-refresh />
                        </template>
                        重置
                    </a-button>
                </a-space>
            </a-col>
        </a-row>
    </a-card>
    <a-card style="margin-top: 20px">
        <div class="toolbar">
            <a-space>
                <a-button type="primary" @click="showAddDialog">
                    <template #icon>
                        <icon-plus />
                    </template>
                    新增优惠券
                </a-button>
            </a-space>
        </div>
        <a-table :columns="columns" row-key="cpId" :loading="loading" :data="data" @page-change="pagination.pageChange"
            @page-size-change="pagination.pageSizeChange" :pagination="pagination" :bordered="false">
            <template #used="{ record }">
                <a-tag :color="record.isUsed ? 'blue' : 'orange'">{{ record.isUsed ? '已使用' : '未使用' }}</a-tag>
            </template>
            <template #state="{ record }">
                <a-tag :color="record.state ? 'blue' : 'orange'">{{ record.state ? '已审核' : '未审核' }}</a-tag>
            </template>
            <template #action="{ record }">
                <a-space>
                    <a-button :disabled="record.isUsed" type="text" @click="editRecord(record)">编辑</a-button>
                    <a-button :disabled="record.isUsed" type="text" @click="bindRecord(record)">绑定</a-button>
                    <a-popconfirm content="确认要删除该数据吗？" @ok="deleteRecord(record)">
                        <a-button :disabled="record.isUsed || record.userId > 0" type="text">删除</a-button>
                    </a-popconfirm>
                </a-space>
            </template>
        </a-table>
    </a-card>
    <a-modal v-model:visible="showBindVisible" width="400px" title="绑定优惠券" @ok="bindCoupon">
        <a-input v-model="bindParam.memberPhone" placeholder="请输入会员手机号进行绑定">
            <template #prefix>
                <icon-user />
            </template>
        </a-input>
    </a-modal>
    <a-modal v-model:visible="visible" width="800px" title="新增优惠券" :footer="null">
        <a-form ref="submitForm" size="large" :label-col-props="{ span: 8 }" :wrapper-col-props="{ span: 16 }"
            :model="submitData" @submit-success="handleSubmitSuccess">
            <a-row>
                <a-col :span="12">
                    <a-form-item field="type" label="类型" :rules="[{ required: true, message: '请选择类型' }]">
                        <a-select v-model.trim="submitData.type" placeholder="请选择类型">
                            <a-option v-for="item in constants.couponTypes" :key="item.value" :value="item.value"
                                :label="item.label"></a-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="couponId" label="券码">
                        <a-input v-model.trim="submitData.couponId" placeholder="不输入系统将自动生成" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="name" label="名称" :rules="[{ required: true, message: '请输入优惠券名称' }]">
                        <a-input v-model.trim="submitData.name" placeholder="请输入优惠券名称" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="couponDesc" label="描述">
                        <a-input v-model.trim="submitData.couponDesc" placeholder="请输入优惠券描述" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="expiresStartTime" label="有效期开始">
                        <a-date-picker style="width: 100%;" show-time v-model.trim="submitData.expiresStartTime"
                            format="YYYY-MM-DD HH:mm:ss" placeholder="请选择有效期开始时间" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="expiresEndTime" label="有效期结束">
                        <a-date-picker style="width: 100%;" show-time v-model.trim="submitData.expiresEndTime"
                            format="YYYY-MM-DD HH:mm:ss" placeholder="请选择有效期结束时间" />
                    </a-form-item>
                </a-col>
                <a-col v-if="!submitData.cpId" :span="12">
                    <a-form-item field="generateNum" label="生成数量">
                        <a-input-number mode="button" v-model.trim="submitData.generateNum" placeholder="请输入生成数量" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="limitTimes" label="使用次数限制">
                        <a-input-number mode="button" v-model="submitData.limitTimes" placeholder="请输入使用次数限制" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item field="value" label="减免金额">
                        <a-input-number mode="button" :precision="2" v-model="submitData.value" placeholder="请输入减免金额" />
                    </a-form-item>
                </a-col>
            </a-row>
            <div class="option-btn">
                <a-space>
                    <a-button html-type="submit" type="primary">保存</a-button>
                    <a-button @click="() => {
                visible = false;
            }
                ">取消</a-button>
                </a-space>
            </div>
        </a-form>
    </a-modal>
</template>

<style scoped></style>
